<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日任务追踪器</title>
    <!-- 在线icon 图片 -->
    <!-- 头部 icon -->
    <!-- <i class="fas fa-tasks">   -->
    <!-- 勾选 icon -->
    <!-- <i class="fas fa-check-circle"></i> -->
    <!-- 加号 -->
    <!-- <i class="fas fa-plus"></i> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 800px;
            /* min-width: 375px; */
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(to right, #4776E6, #8E54E9);
            color: white;
            padding: 30px;
            text-align: center;
            position: relative;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .schedule {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background-color: #e8e8e8;
        }

        .schedule p,
        .schedule span {
            color: #2575fc;
            font-weight: 700;
            width: 15%;
            text-align: center;
        }

        .radius {
            height: 16px;
            width: 70%;
            border: none;
            opacity: 0.8;
            border-radius: 10px;
            overflow: hidden;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .radius::-webkit-progress-value {
            background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
            border-radius: 10px;
            transition: all 0.5s ease;
        }

        .radius::-webkit-progress-bar {
            background-color: rgba(0, 0, 0, 0.2);
        }

        .add {
            width: 96%;
            margin: 15px auto;
            height: 40px;
            display: flex;
            align-items: center;
            border-radius: 5px;
            /* border: .5px solid #c0c0c0; */
            overflow: hidden;
        }

        .add-in {
            width: 82%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: .5px solid #c0c0c0;
            border-radius: 5px;

        }

        .addiput {
            width: 90%;
            height: 100%;
            border: none;
            outline: none;
            background: none;
            color: #000;
            padding: 0 10px;
            font-size: 0.9rem;
        }

        .i {
            color: #c0c0c0;
            width: 10%;
            font-size: 0.9rem;
            text-align: center;
        }

        .button {
            width: 18%;
            height: 100%;
            background: linear-gradient(to right, #4776E6, #8E54E9);
            color: #fff;
            border: none;
            font-size: 1rem;
            text-align: center;
            font-weight: 700;
            text-align: center;
            outline: none;
            cursor: pointer;
        }

        .button i {
            margin: 0 0.2rem;
            font-size: 1rem;
        }

        .task {
            width: 100%;
            height: auto;
            min-height: 250px;
            border: 0.5px solid #c0c0c0;
        }

        .task .empty {
            width: 100%;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .empty-text {
            text-align: center;
        }

        .empty-text i {
            font-size: 5rem;
            color: #c0c0c0;
        }

        .text p:nth-child(1) {
            font-size: 1rem;
            font-weight: 700;
            padding: 8px;
        }

        .text p:nth-child(2) {
            font-size: 0.8rem;
        }

        .task .childer {
            width: 96%;
            height: 60px;
            border-radius: 10px;
            margin: 15px auto;
            border-left: 3.5px solid blue;
            box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s linear;
        }

        .task .left,
        .task .right {
            width: 30%;
            font-size: 1rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .task .left input {
            width: 1rem;
            height: 1rem;
        }

        .task .left span {
            /* 单文本省略 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            align-items: center;
            text-align: center;
            width: 70%;
            text-align: left;
        }

        .updata {
            color: orange;
        }

        .delete {
            color: red;
        }


        .childer:hover {
            transform: translateY(-3px);
        }

        .secton {
            width: 100%;
            height: 120px;
            min-height: 120px;
            border-bottom: 0.5px solid #c0c0c0;
        }

        .secton ul {
            width: 100%;
            height: 100%;
            list-style: none;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .secton ul li {
            text-align: center;
        }

        .secton ul li div {
            color: #2575fc;
            font-size: 23px;
            font-weight: 600;
        }

        footer {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 0.8rem;
        }

        /* 样式 */
        .sccess {
            border-left: 3.5px solid green !important;


        }

        .left input {
            background-color: green;
        }

        /* 添加删除线 */
        .strikethrough {
            text-decoration: line-through;
        }

        input[type="checkbox"] {
            /* 选中后的背景颜色 */
            accent-color: #00c220;
        }

        .show {
            display: none !important;
        }

        /* 不小于375不大于800 */
        @media (min-width: 375px) and (max-width: 800px) {
            .header h1 {
                font-size: 2rem;

            }

            .header p {
                font-size: 0.9rem;
            }

            .schedule {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }

            .schedule p,
            .schedule span {
                width: auto;
            }

            .radius {
                width: 96%;
            }

            .add {
                height: auto;
                flex-direction: column;
                overflow: hidden;
                gap: 6px;
            }

            .add-in {
                border-radius: 5px;
                width: 96%;
                height: 50px;

            }

            .addiput {
                width: 90%;
                height: 100%;
                font-size: 1.1rem;
            }

            .i {
                color: #000;
                width: 10%;
                font-size: 1.1rem;
            }

            .button {
                width: 96%;
                border-radius: 5px;
                height: 50px;
                font-size: 1.1rem;

            }

            .button i {
                margin: 0 0.3rem;
                font-size: 1.1rem;

            }

            .task {
                min-height: 200px;

            }

            .task .childer {
                width: 92%;

                display: flex;
                justify-content: space-between;
            }

            .task .left,
            .task .right {
                width: 30%;
                font-size: 1rem;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
            }

            .task .left input {
                width: 1rem;
                height: 1rem;
            }

            .updata {
                color: orange;
                font-size: 1.1rem;
            }

            .delete {
                color: red;
                font-size: 1.1rem;
            }

            .secton {
                width: 96%;
                height: 90px;
                min-height: 90px;
                border-bottom: 0.5px solid #c0c0c0;
            }
        }
    </style>
</head>

<body>
    <!-- html -->
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-tasks"></i> 每日任务追踪器</h1>
            <p>规划你的一天，提高工作效率</p>
            <!-- <i class="fas fa-check-circle"></i>
            <i class="fas fa-plus"></i>
            <i class="fas fa-edit"></i>
            <i class="fas fa-trash-alt"></i> -->
        </div>
        <!-- 进度 -->
        <div class="schedule">
            <p>今日进度</p>
            <progress value="0" max="100" class="radius"></progress>
            <span>0%</span>
        </div>
        <div class="add">
            <div class="add-in"><i class="fas fa-plus i"></i>
                <input type="text" name="" id="" placeholder="添加任务..." class="addiput">
            </div>
            <button class="button"> <i class="fas fa-plus"></i>添加任务</button>
        </div>
        <form class="task">
            <div class="empty">
                <div class="empty-text">
                    <i class="fas fa-check-circle"></i>
                    <div class="text">
                        <p class="p">没有待办任务</p>
                        <p class="p">添加新任务开始你的一天！</p>
                    </div>
                </div>

            </div>
            <div class="task-childer">

            </div>
            <!-- 内容 -->
        </form>
        <!-- 数据统计 -->
        <section class="secton">
            <ul>
                <li>
                    <div class="sum">0</div>
                    <p>总任务</p>
                </li>
                <li>
                    <div class="accomplish">0</div>
                    <p>已完成</p>
                </li>
                <li>
                    <div class="unfinished">0</div>
                    <p>待完成</p>
                </li>
            </ul>
        </section>
        <!-- 尾部 -->
        <footer>
            每天完成小目标,成就大梦想！
        </footer>
    </div>

    <!-- js  -->
    <script>
        const creadd = (arrs) => {
            const empty = document.querySelector('.empty');
            const task = document.querySelector('.task');
            const taskList = document.querySelector('.task-childer');
            [...taskList.children].forEach(child => child.remove())
            arrs.forEach((element, index) => {
                const div = document.createElement('div');
                div.classList.add('childer');
                div.innerHTML = `
                <div class="left"><input type="checkbox" ${element.status} value="${element.name}" name="${index}" data-index="${index}"><span>${element.name}</span></div>
                <div class="right"><i class="fas fa-edit updata" data-index="${index}"></i>
                    <i class="fas fa-trash-alt delete" data-index="${index}"></i>
                </div>
              `;
                taskList.appendChild(div);
                empty.classList.add('show');
            });

            const deletebtn = document.querySelectorAll('.delete');
            const updata = document.querySelectorAll('.updata');
            const checkbox = document.querySelectorAll('.left input');
            // delete
            deletebtn.forEach(element => {
                element.addEventListener('click', function (e) {
                    const index = e.target.dataset.index
                    // 提示是否删除是删否返回false
                    if (confirm(`确定要删除${taskList.children[index].children[0].children[1].innerHTML}任务吗？`)) {
                        arr.splice(index, 1)
                        statistics(arr)
                        percentage(arr)
                        console.log(taskList.children, 'data-index')
                        // task.removeChild(task.children)
                        taskList.children[index].remove()
                        // 删除后重新将数据排版
                        creadd(arr)
                        localStorage.setItem('arr', JSON.stringify(arr))
                        const ars = JSON.parse(localStorage.getItem('arr')).length
                        if (ars <= 0) {
                            localStorage.removeItem('arr')
                            empty.classList.remove('show')
                        }
                    } else {
                        return false
                    }

                })
            });
            // update
            updata.forEach((element, index) => {
                element.addEventListener('click', function (e) {
                    const up = prompt('请输入修改后的内容', element.parentNode.previousElementSibling.children[1].innerHTML);
                    if (up !== null) {
                        element.parentNode.previousElementSibling.children[1].innerHTML = up
                        arr[index].name = up
                        console.log('修改后：', arr)
                        localStorage.setItem('arr', JSON.stringify(arr))
                        return arr
                    } else {
                        arr[index].name = element.parentNode.previousElementSibling.children[1].innerHTML
                        localStorage.setItem('arr', JSON.stringify(arr))
                        console.log('未修改：', arr)

                    }

                })
            });
            // 选中
            checkbox.forEach((element) => {
                if (element.checked) {
                    element.parentNode.parentNode.classList.add('sccess')
                    element.nextElementSibling.classList.add('strikethrough')
                } else {
                    element.parentNode.parentNode.classList.remove('sccess')
                    element.nextElementSibling.classList.remove('strikethrough')
                }
                element.addEventListener('click', function (e) {
                    if (element.checked) {
                        element.parentNode.parentNode.classList.add('sccess')
                        element.nextElementSibling.classList.add('strikethrough')
                        arr[e.target.dataset.index].status = "checked"
                        localStorage.setItem('arr', JSON.stringify(arr))
                        console.log(arr[e.target.dataset.index], 'checked')
                        statistics(arr)
                        percentage(arr)
                    } else {
                        element.parentNode.parentNode.classList.remove('sccess')
                        element.nextElementSibling.classList.remove('strikethrough')
                        arr[e.target.dataset.index].status = null
                        statistics(arr)
                        percentage(arr)
                        localStorage.setItem('arr', JSON.stringify(arr))
                    }
                })
            })
        }
        //刚进入、添加和修改时触发更新数据
        const statistics = (ar) => {
            const count = ar.length
            const done = ar.filter(el => el.status === 'checked').length
            const percent = ar.filter(el => el.status === null).length
            const sum = document.querySelector('.sum')
            sum.innerHTML = count
            const accomplish = document.querySelector('.accomplish')
            accomplish.innerHTML = done
            const unfinished = document.querySelector('.unfinished')
            unfinished.innerHTML = percent
        }
        // 刚进入、添加和删除时触发进度
        const percentage = (ar) => {
            const radius = document.querySelector('.radius');
            const schedulespan = document.querySelector('.schedule span');
            const count = ar.length
            const done = ar.filter(el => el.status === 'checked').length
            // 被除数不能为0
            if (done > 0 && count > 0) {
                const percent = Math.floor(done / count * 100)
                radius.value = percent
                schedulespan.innerHTML = `${percent}%`
            } else {
                radius.value = 0
                schedulespan.innerHTML = '0%'
            }
        }
        let arr = JSON.parse(localStorage.getItem('arr')) || []
        console.log(arr)
        if (arr.length > 0) {
            creadd(arr)
            statistics(arr)
            percentage(arr)
        }
        // 获取元素
        const add = document.querySelector('.button');
        const addinput = document.querySelector('.addiput');
        // 添加监听
        add.addEventListener('click', () => {
            if (addinput.value === '' || addinput.value === null) {
                alert("任务不能为空")
                return
            }
            // 避免重复
            const rd = arr.map(item => item.name == addinput.value)
            if (rd.includes(true)) {
                alert("任务不能重复")
                addinput.value = ''
                return
            } else {
                arr.push({ name: addinput.value, status: null });
                addinput.value = '';
                const set = new Set(arr);
                localStorage.setItem('arr', JSON.stringify(arr))
                statistics(arr)
                percentage(arr)
                creadd([...set]);
            }

        })
    </script>
</body>

</html>